<template>
    <div class="phonecode">
        <van-nav-bar left-arrow :border="false" @click-left="router.go(-1)"></van-nav-bar>
        <loginTitle>
            <template #title>输入验证码</template>
            <template #text>为安全起见，请验证您的手机</template>
        </loginTitle>
        <van-form @submit="onSubmit" style="margin-top: 8rem;">
            <van-cell-group inset>
                <van-field left-icon="graphic" v-model="phone" name="phone" placeholder="请输入手机号" :rules="[{ required: true, message: '请填写手机号' }, {
                    pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号输入错误'
                }]" />
            </van-cell-group>
            <div style="text-align: center;margin-top: 3rem;">
                <van-button type="primary" size="large" native-type="submit"
                    color="linear-gradient(to right, #e9837a, #7536f9)">
                    保存手机号
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import router from '@/router';
import loginTitle from '@/components/loginTitle.vue';
import { storeToRefs } from 'pinia';
import { useUserLogin } from '../../../store/useLogin/index';
let useLogin = useUserLogin();
let { myphone } = storeToRefs(useLogin) as any;
const phone = ref('');//手机号
let onSubmit = (val:{phone:string}) => {
    router.push('/authcode')
    myphone.value=val.phone
}
</script>

<style lang="scss" scoped>
.phonecode {
    height: 100%;
    width: 100%;

    .userinfo {
        display: flex;
        align-items: end;
        height: 8rem;

        img {
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 50%;
            margin: 0 1.5rem 0 3rem;
        }

        .userinfo-info {
            font-size: 1.2rem;
            color: #b6afd5;

        }
    }
}

::v-deep .van-nav-bar .van-icon {
    color: #000;

}

::v-deep .van-password-input__item {
    border: 0.1rem solid #d2cde5;
    border-radius: 1rem;
}

::v-deep .van-button {
    height: 4.5rem;
    width: 32rem;
    border-radius: 1rem;
}

::v-deep .van-field__left-icon {
    color: #8560c7;
}

::v-deep .van-cell {
    height: 5.5rem;
}
</style>